<template>
  <!-- 播放器样式 -->
  <div class="playbar">
    <!-- 上一首 -->
    <svg @click="prev()" style=" margin-left: 50px;" t="1731721064658" class="icon" viewBox="0 0 1024 1024"
      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4592" width="200" height="200">
      <path
        d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z"
        fill="#2c2c2c" p-id="4593"></path>
    </svg>
    <!-- 暂停播放 -->
    <svg @click="togglePlay()" @keyup.space="!audioStore.isPlay" v-show="!audioStore.isPlay" t="1731744364205"
      class="icon" viewBox="0 0 1024 1024" tabindex="0" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4287"
      width="200" height="200">
      <path
        d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
        fill="#2c2c2c" p-id="4288"></path>
      <path
        d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
        fill="#2c2c2c" p-id="4289"></path>
    </svg>
    <svg @click="togglePlay()" @keyup.space="!audioStore.isPlay" v-show="audioStore.isPlay" t="1731744395735"
      class="icon" viewBox="0 0 1048 1024" tabindex="0" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5332"
      width="200" height="200">
      <path
        d="M524.272128 0.018022C241.513165 0.018022 12.288102 229.245952 12.288102 512.005018c0 112.734003 36.43904 216.957952 98.17897 301.537997l38.667981-40.258048C97.458176 699.230003 67.143168 609.158963 67.143168 512.005018 67.143168 259.540992 271.807078 54.872986 524.272128 54.872986c252.45696 0 457.120973 204.668006 457.120973 457.132032 0 252.460954-204.664013 457.118003-457.120973 457.118003-96.240026 0-185.530982-29.744026-259.189043-80.53504l-34.539008 42.797978c83.150029 58.344038 184.437965 92.596019 293.728973 92.596019 282.758963 0 511.984026-229.220966 511.984026-511.976038C1036.256154 229.245952 807.031091 0.018022 524.272128 0.018022zM615.693107 256.011981l0 511.987 54.855 0L670.548107 256.012 615.693128 256.012zM377.996083 256.011981l0 511.987 54.855 0L432.851083 256.012 377.996128 256.012z"
        p-id="5333" fill="#2c2c2c"></path>
    </svg>
    <!-- 下一首 -->
    <svg @click="next()" t="1731744740760" class="icon" viewBox="0 0 1024 1024" version="1.1"
      xmlns="http://www.w3.org/2000/svg" p-id="6865" width="200" height="200">
      <path
        d="M655.706179 465.602819L332.053897 218.588294c-38.414608-29.327534-93.791393-1.929039-93.791392 46.396277v494.029051c0 48.325316 55.376785 75.725617 93.791392 46.398084l323.652282-247.014525c30.602722-23.357989 30.602722-69.436372 0-92.794362zM781.064814 780.798397V451.684117v-164.562559c0-19.628152 5.904521-60.475733-17.057907-75.841215-25.523642-17.068744-59.747828 1.210165-59.747828 31.919454v493.676839c0 19.628152-5.915358 60.473927 17.047069 75.841215 25.532673 17.068744 59.758666-1.211971 59.758666-31.919454z"
        fill="#2c2c2c" p-id="6866"></path>
    </svg>
    <div class="img-container" @click="showDetails()">
      <img style="width: 70px;height: 70px;margin-top: 5px;margin-left: 20px;border-radius: 10px;" :src="imageUrl">
      <div class="img-overlay">
        <svg t="1731990316169" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4301"
          width="24" height="24">
          <path
            d="M469.333333 469.333333H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256z"
            fill="#ffffff" p-id="4302"></path>
        </svg>
      </div>
    </div>
    <div class="imglation">
      <span>{{ audioStore.title }}</span>
      <span style="font-size: 15px;font-weight: 600;">{{ audioStore.artist }}</span>
    </div>
    <!-- 进度条 -->
    <div class="playprogress">
      <span style="margin-top: 10px;">{{ formatTime(audioStore.curTime) }}</span>
      <el-slider :min="0" :show-tooltip="false" style="margin-left: 15px;margin-top: 10px;" v-model="audioStore.curTime"
        :max="audioStore.duration" />
      <span style="margin-left: 15px;margin-top: 10px;">{{ formattedDuration }}</span>
    </div>
    <!-- 音量 -->
    <div class="volume">
      <svg style="margin-left: 20px;" t="1731894924975" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="4442" width="100" height="100">
        <path
          d="M554.17 851.926c-17.9 0-32.5-14.5-32.5-32.5v-533.3c0-21.6-17.6-39.3-39.3-39.3-5.6 0-10.9 1.2-16 3.4l-199.4 89.2c-27.1 12.1-55.9 18.2-85.5 18.2h-34c-45.5 0-82.6 37.1-82.6 82.6v140c0 21.8 8.5 42.3 23.9 57.8 15.4 15.4 35.9 23.9 57.8 23.9H181.37c29.8 0 58.7 6.2 85.9 18.4l145.6 65.5c16.3 7.4 23.6 26.6 16.3 42.9-7.4 16.4-26.6 23.6-42.9 16.3l-145.5-65.5c-18.8-8.4-38.7-12.7-59.3-12.7H146.67c-39.2 0-76-15.3-103.7-43-27.7-27.7-42.9-64.5-42.9-103.7v-140c0-81.3 66.2-147.5 147.5-147.5h34c20.5 0 40.4-4.2 59-12.6l199.4-89.2c13.4-6 27.7-9.1 42.5-9.1 57.5 0 104.2 46.7 104.2 104.2v533.3c-0.1 18.1-14.6 32.7-32.5 32.7zM672.97 664.826c-8.3 0-16.6-3.2-22.9-9.5-12.7-12.7-12.7-33.2 0-45.9 53.7-53.7 53.7-141.2 0-194.9-12.7-12.7-12.7-33.2 0-45.9s33.2-12.7 45.9 0c79 79 79 207.7 0 286.7-6.4 6.4-14.7 9.5-23 9.5z"
          fill="#707070" p-id="4443"></path>
        <path
          d="M769.37 761.326c-11.9 0-23.4-6.6-29.1-18-6.5-13-3.4-28.4 6.6-38 51.5-51.7 79.8-120.4 79.8-193.4 0-73.2-28.5-142-80.3-193.8-12.7-12.7-12.7-33.2 0-45.9 12.7-12.7 33.2-12.7 45.9 0 64.1 64 99.3 149.2 99.3 239.7 0 90.4-35.2 175.5-99 239.5-2.5 2.6-5.5 4.8-8.7 6.4-4.7 2.4-9.6 3.5-14.5 3.5z m-0.1-32.5h0.1-0.1z"
          fill="#707070" p-id="4444"></path>
        <path
          d="M862.97 854.826c-8.3 0-16.6-3.2-22.9-9.5-12.7-12.7-12.7-33.2 0-45.9 76.8-76.8 119.1-178.9 119.1-287.5s-42.3-210.7-119.1-287.5c-12.7-12.7-12.7-33.2 0-45.9 12.7-12.7 33.2-12.7 45.9 0 89.1 89 138.1 207.4 138.1 333.4 0 125.9-49 244.3-138.1 333.4-6.4 6.4-14.7 9.5-23 9.5z"
          fill="#707070" p-id="4445"></path>
      </svg>
      <el-slider style="margin-top: 16px;margin-left: 10px;" v-model="volume" />
    </div>
    <!-- 播放列表 -->
    <svg @click="showList()" style="margin-left: 20px;" t="1731821961540" class="icon" viewBox="0 0 1024 1024"
      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4575" width="200" height="200">
      <path
        d="M736 352a32 32 0 0 1 31.264 25.088c4.384 18.816 9.792 32.256 15.232 39.712l2.336 3.008c0.8 0.896 1.088 1.024 1.28 1.024 46.624 0 65.76 39.68 65.088 101.024a32 32 0 0 1-64-0.704c0.192-16.32-1.344-28.16-3.776-34.944l-0.608-1.504-1.92-0.032a65.088 65.088 0 0 1-12.896-2.24V736c0 57.824-66.816 96-144 96S480 793.824 480 736s66.816-96 144-96c29.184 0 56.864 5.44 80.032 15.36L704 384.704c0-1.408 0.032-2.816 0.192-4.224L704 384a32 32 0 0 1 32-32zM416 704a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h192z m208 0c-46.528 0-80 19.136-80 32s33.472 32 80 32 80-19.136 80-32-33.472-32-80-32zM544 448a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h320z m256-256a32 32 0 0 1 0 64H224a32 32 0 1 1 0-64h576z"
        fill="#2c2c2c" p-id="4576"></path>
    </svg>
    <!-- 下载 -->
    <svg @click="download()" style="margin-left: 20px;" t="1731990316169" class="icon" viewBox="0 0 1024 1024"
      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4301" width="200" height="200">
      <path
        d="M512.3 959c-10.6 0-20.8-4.2-28.3-11.7l-125-125c-15.6-15.6-15.6-40.9 0-56.6s40.9-15.6 56.6 0l96.7 96.7 96.7-96.7c15.6-15.6 40.9-15.6 56.6 0s15.6 40.9 0 56.6l-125 125c-7.5 7.5-17.7 11.7-28.3 11.7z"
        fill="#2c2c2c" p-id="4302"></path>
      <path d="M512.3 815.3c-22.1 0-40-17.9-40-40v-300c0-22.1 17.9-40 40-40s40 17.9 40 40v300c0 22.1-17.9 40-40 40z"
        fill="#2c2c2c" p-id="4303"></path>
      <path
        d="M729.4 699.2h-92.1c-22.1 0-40-17.9-40-40s17.9-40 40-40h92.1c65 0 117.9-52.9 117.9-117.9 0-64.8-52.6-117.6-117.4-117.9h-1.2c-11.3 0-22.1-4.6-29.7-12.9a40.16 40.16 0 0 1-10.4-30.7c0.5-5.8 0.8-11.1 0.8-16.2 0-97.6-79.4-177.1-177.1-177.1s-177 79.5-177 177.2c0 5.1 0.3 10.4 0.8 16.2 1 11.2-2.8 22.4-10.4 30.7-7.6 8.2-18.3 12.9-29.4 12.9h-1.4c-64.8 0.3-117.4 53-117.4 117.9 0 65 52.9 117.9 117.9 117.9h92.1c22.1 0 40 17.9 40 40s-17.9 40-40 40h-92.1c-109.1 0-197.9-88.8-197.9-197.9 0-95.6 68.1-175.6 158.4-193.9C259.8 245 286 186.7 330.7 142c48.6-48.6 113.1-75.3 181.8-75.3S645.7 93.4 694.3 142c44.7 44.7 70.9 102.9 74.8 165.5 90.3 18.4 158.4 98.3 158.4 193.9-0.2 109-89 197.8-198.1 197.8z"
        fill="#2c2c2c" p-id="4304"></path>
    </svg>
    <!-- 播放模式切换按钮 -->
    <svg @click="togglePlayMode()" class="icon" :title="audioStore.playMode === 'sequence' ? '顺序播放' : '随机播放'"
      style="margin-left: 20px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
      height="200">
      <!-- 顺序播放图标 -->
      <path v-if="audioStore.playMode == 'sequence'"
        d="M146.944 749.568c-65.536-56.32-102.912-140.288-102.912-227.84C44.032 359.424 172.032 225.28 327.68 225.28h305.664L496.64 78.848l43.52-43.52 140.288 146.432c9.216 9.216 15.36 22.016 15.36 25.088 6.144 22.016 3.072 43.52-12.288 62.464-12.288 12.288-37.376 25.088-59.392 18.944H327.68C205.824 288.256 105.984 394.24 105.984 522.24c0 68.608 31.232 134.144 80.896 181.248l-39.936 46.08z m489.984-521.216c3.072 0 0 0 0 0zM486.912 1005.568l-143.36-143.36c-9.216-9.216-15.36-22.016-15.36-25.088-6.144-22.016-3.072-46.592 12.288-62.464 12.288-12.288 37.376-25.088 59.392-18.944h299.52c124.928 0 227.84-102.912 227.84-227.84 0-68.608-31.232-131.072-84.48-174.592l40.448-46.592c68.608 56.32 105.984 137.216 105.984 224.768 0 159.232-128 290.304-290.304 290.304H390.144l140.288 143.36-43.52 40.448z"
        p-id="5374" fill="#515151"></path>
      <!-- 随机播放图标 -->
        <path v-else
          d="M753.564731 337.471035c-45.8697 0-160.259984 113.849978-243.789399 194.548928C383.134027 654.383848 263.508509 773.284865 167.764911 773.284865l-58.892295 0c-24.068162 0-43.581588-19.526729-43.581588-43.581588s19.513426-43.581588 43.581588-43.581588l58.892295 0c60.504002 0 183.002964-121.68134 281.432741-216.784348 119.79641-115.744117 223.254713-219.029482 304.368102-219.029482l56.209186 0-59.641355-57.828057c-17.033955-16.993023-17.060561-42.902112-0.057305-59.927881 17.002232-17.030885 44.596707-17.064654 61.631686-0.065492l134.207631 133.874033c8.192589 8.172123 12.794397 19.238157 12.794397 30.803563 0 11.564383-4.601808 22.604834-12.794397 30.776957L811.706943 461.72599c-8.505721 8.486278-19.646456 12.522198-30.78719 12.522198-11.166317 0-22.333658-4.676509-30.844495-13.199627-17.003256-17.025769-16.975627-45.432749 0.057305-62.425771l59.641355-61.151755L753.564731 337.471035zM811.706943 561.66105c-17.034978-16.999163-44.629453-16.972557-61.631686 0.058328-17.003256 17.024745-16.975627 46.257533 0.057305 63.250556l59.641355 61.150732-56.209186 0c-35.793204 0-95.590102-52.946886-154.87637-108.373243-17.576307-16.435321-45.161572-16.3422-61.594847 1.226944-16.444531 17.568121-15.523555 46.393633 2.053776 62.823837 90.322122 84.458577 151.246703 131.484613 214.417441 131.484613l56.209186 0-59.641355 57.824987c-17.033955 16.993023-17.060561 43.736107-0.057305 60.761875 8.511861 8.523117 19.678178 12.369725 30.844495 12.369725 11.140735 0 22.281469-4.453429 30.78719-12.939707L945.914574 757.311055c8.192589-8.173147 12.794397-19.315928 12.794397-30.881334 0-11.564383-4.601808-22.682605-12.794397-30.855752L811.706943 561.66105zM108.871593 337.471035l58.892295 0c45.932122 0 114.40154 58.455343 168.915108 107.942431 8.352225 7.576559 18.832927 12.140505 29.29214 12.140505 11.852956 0 23.673166-4.394077 32.270984-13.857613 16.182564-17.807574 14.859429-46.823422-2.958378-62.998823-85.247546-77.381391-156.561755-130.388652-227.519854-130.388652l-58.892295 0c-24.068162 0-43.581588 19.526729-43.581588 43.581588S84.804455 337.471035 108.871593 337.471035z"
          p-id="6508" fill="#515151"></path>
    </svg>
  </div>
</template>

<script setup name="playbar">
import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
import { useAudioStore } from '@/store/audio';
import config from '../../public/config';
import { getSingerById } from '@/api/singer';
import logo3 from '@/assets/music.png'
import { audioMixin } from '@/mixins/index.js'
import { ElMessage } from 'element-plus';

//混入
defineOptions({
  mixins: [audioMixin],
});

const audioStore = useAudioStore()

const volume = ref(100)

const imageUrl = computed(() => {
  // 据某个条件来决定使用固定的 URL 或者动态 URL
  if (audioStore.pic) {
    return `${config.downloadUrl}?name=${audioStore.pic}`;
  } else {
    return logo3;
  }
});

// 正确的响应式监听
watch(() => audioStore.singerId, (value) => {
  console.log(value)
  getSinger();
});
watch(() => audioStore.autoNext, () => {
  next()
});
watch(() => volume.value, (val) => {
  audioStore.volume = val / 100
});

async function getSinger() {
  let params = new URLSearchParams();
  params.append("id", audioStore.singerId);
  getSingerById(params)
    .then(res => {
      console.log(res)
      audioStore.artist = res.name
    });
}

function showList() {
  audioStore.isDrawShow = true
  console.log(audioStore.listOfSong)
}

function togglePlay() {
  if (audioStore.isPlay) {
    audioStore.isPlay = false
  } else {
    audioStore.isPlay = true
  }
}
function formatTime(seconds) {
  // 处理无效输入
  if (!seconds || isNaN(seconds) || seconds === Infinity) {
    return '00:00';
  }

  const hrs = Math.floor(seconds / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  // 格式化为两位数
  const formattedMins = mins.toString().padStart(2, '0');
  const formattedSecs = secs.toString().padStart(2, '0');

  // 如果小时为 0，则不显示小时部分
  if (hrs === 0) {
    return `${formattedMins}:${formattedSecs}`;
  }

  const formattedHrs = hrs.toString().padStart(2, '0');
  return `${formattedHrs}:${formattedMins}:${formattedSecs}`;
}

// 获取下一个要播放的索引
function getNextIndex() {
  if (audioStore.playMode === 'random') {
    // 随机播放模式：生成除当前索引外的随机索引
    const currentIndex = audioStore.listIndex;
    let randomIndex;
    do {
      randomIndex = Math.floor(Math.random() * audioStore.listOfSong.length);
    } while (randomIndex === currentIndex && audioStore.listOfSong.length > 1);
    return randomIndex;
  } else {
    // 顺序播放模式
    if (audioStore.listIndex < audioStore.listOfSong.length - 1) {
      return audioStore.listIndex + 1;
    }
    return 0;
  }
}

// 获取上一个要播放的索引
function getPrevIndex() {
  if (audioStore.playMode === 'random') {
    // 随机播放模式：生成除当前索引外的随机索引
    const currentIndex = audioStore.listIndex;
    let randomIndex;
    do {
      randomIndex = Math.floor(Math.random() * audioStore.listOfSong.length);
    } while (randomIndex === currentIndex && audioStore.listOfSong.length > 1);
    return randomIndex;
  } else {
    // 顺序播放模式
    if (audioStore.listIndex > 0) {
      return audioStore.listIndex - 1;
    }
    return audioStore.listOfSong.length - 1;
  }
}

function prev() {
  if (audioStore.listIndex !== -1 && audioStore.listOfSong.length > 1) {
    audioStore.listIndex = getPrevIndex();
    toPlay(audioStore.listOfSong[audioStore.listIndex].url);
  }
}

function next() {
  if (audioStore.listIndex !== -1 && audioStore.listOfSong.length > 1) {
    audioStore.listIndex = getNextIndex();
    toPlay(audioStore.listOfSong[audioStore.listIndex].url);
  }
}

// 切换播放模式的方法
function togglePlayMode() {
  audioStore.playMode = audioStore.playMode === 'sequence' ? 'random' : 'sequence';
  // 可以添加一个提示
  ElMessage.success(`已切换至${audioStore.playMode === 'sequence' ? '顺序' : '随机'}播放`);
}

function toPlay(url) {
  if (url && url != audioStore.url) {
    audioStore.id = audioStore.listOfSong[audioStore.listIndex].id;
    audioStore.url = audioStore.listOfSong[audioStore.listIndex].url;
    audioStore.pic = audioStore.listOfSong[audioStore.listIndex].pic
    audioStore.title = audioStore.listOfSong[audioStore.listIndex].name
    audioStore.singerId = audioStore.listOfSong[audioStore.listIndex].singerId
    audioStore.lyric = audioStore.listOfSong[audioStore.listIndex].lyric
  }
}
function showDetails() {
  audioStore.isDetailShow = true
}
function download() {
  try {
    // 检查 URL 是否存在
    if (!audioStore.url) {
      ElMessage.error('下载链接不存在');
      return;
    }

    // 创建一个 a 标签用于下载
    const link = document.createElement('a');
    link.href = audioStore.url;

    // 使用 audioStore.title 作为文件名，��加 .mp3 扩展名
    const fileName = `${audioStore.title || 'audio'}.mp3`;
    link.download = fileName;

    // 添加到文档中并触发点击
    document.body.appendChild(link);
    link.click();

    // 清理 DOM
    document.body.removeChild(link);

    ElMessage.success('下载开始');
  } catch (error) {
    console.error('下载失败:', error);
    ElMessage.error('下载失败，请稍后重试');
  }
}

// 添加键盘事件监听
onMounted(() => {
  window.addEventListener('keyup', handleKeyPress)
  const audio = document.getElementById('player'); // 获取你的音频元素
  if (audio) {
    audio.addEventListener('loadedmetadata', () => {
      // 更新 duration
      audioStore.duration = audio.duration;
    });
  }
})

onUnmounted(() => {
  window.removeEventListener('keyup', handleKeyPress)
})

// 处理键盘事件
function handleKeyPress(event) {
  if (event.code === 'Space') {
    // 防止空格键触发其他元素的点击事件
    event.preventDefault()
    togglePlay()
  }
}

// 添加一个估算时长的函数
function estimateDuration(fileSize, bitRate = 320) { // 默认假设320kbps
  // 文件大小（字节）/ (比特率(kbps) * 1000 / 8) = 估计秒数
  const seconds = fileSize / (bitRate * 1000 / 8);
  return Math.floor(seconds);
}

// 修改 formattedDuration 计算属性
const formattedDuration = computed(() => {
  const duration = audioStore.duration;
  if (!duration || isNaN(duration) || duration === Infinity || duration <= 0) {
    // 检查 currentSong 是否存在
    if (audioStore.currentSong?.size) {
      return formatTime(estimateDuration(audioStore.currentSong.size));
    }
    return '00:00'; // 如果没有 size 信息，返回默认值
  }
  return formatTime(duration);
});

// 2. 修改音频初始化和监听逻辑
onMounted(() => {
  // 获取音频元素
  const audio = document.getElementById('player');
  if (audio) {
    // 监听元数据加载
    audio.addEventListener('loadedmetadata', () => {
      if (audio.duration && audio.duration !== Infinity) {
        audioStore.duration = audio.duration;
      }
    });

    // 监听时长变化
    audio.addEventListener('durationchange', () => {
      if (audio.duration && audio.duration !== Infinity) {
        audioStore.duration = audio.duration;
      }
    });
  }
});

</script>

<style scoped>
.playbar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.3);
  background-color: rgb(254, 254, 254);
  border-radius: 0px 0px 10px 10px;
}

.icon {
  width: 45px;
  height: 45px;
  cursor: pointer;
  margin-top: 10px;
}

.imglation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px
}

.imglation span {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
}

.playprogress {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 400px;
  margin-left: 25px;
}

.volume {
  display: flex;
  flex-direction: row;
  width: 200px;
}

.img-container {
  position: relative;
  cursor: pointer;
}

.img-overlay {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.img-container:hover .img-overlay {
  opacity: 1;
}

/* 添加响应式媒体查询 */
@media screen and (max-width: 1400px) {
  .playprogress {
    width: 300px;
  }

  .volume {
    width: 150px;
  }
}

@media screen and (max-width: 1200px) {
  .playprogress {
    width: 250px;
  }

  .icon {
    width: 40px;
    height: 40px;
  }

  .imglation span {
    font-size: 18px;
  }
}

@media screen and (max-width: 992px) {
  .playprogress {
    width: 200px;
  }

  .volume {
    width: 120px;
  }

  .icon {
    width: 35px;
    height: 35px;
    margin-top: 15px;
  }

  .img-container img {
    width: 60px;
    height: 60px;
  }

  .img-overlay {
    width: 60px;
    height: 60px;
  }
}

@media screen and (max-width: 768px) {
  .volume {
    display: none;
  }

  .playprogress span {
    display: none;
  }

  .playprogress {
    width: 150px;
    margin-left: 15px;
  }

  .icon {
    margin-left: 10px;
  }
}

@media screen and (max-width: 576px) {

  .img-container,
  .img-overlay {
    display: none;
  }

  .imglation {
    margin-left: 10px;
  }

  .imglation span {
    font-size: 16px;
  }

  .icon {
    width: 30px;
    height: 30px;
    margin-top: 10px;
  }
}
</style>
